<!-- 模态框-设置页面 -->
<template>
<div id="setting">
  <div class="container">
    <!-- 通用设置 -->
    <section class="setting-block">
      <header class="setting-block-title">{{ commonSetting.title }}</header>
      <div class="setting-block-content">
        <section class="setting-item">
          <span>{{ commonSetting.language.title }}</span>
          <div>
            <app-select :options="commonSetting.language.options" v-model="language" />
          </div>
        </section>
      </div>
    </section>
    <!-- 搜索设置 -->
    <section class="setting-block">
      <header class="setting-block-title">{{ searchSetting.title }}</header>
      <div class="setting-block-content">
        <section class="setting-item">
          <span>{{ searchSetting.defaultEngine.title }}</span>
          <div>
            <app-select :options="searchSetting.defaultEngine.options" v-model="defaultEngine" />
          </div>
        </section>
      </div>
    </section>
    <!-- 外观设置 -->
    <section class="setting-block">
      <header class="setting-block-title">{{ appearanceSetting.title }}</header>
      <div class="setting-block-content">
        <section class="setting-item">
          <span>{{ appearanceSetting.theme.title }}</span>
          <app-radio :options="appearanceSetting.theme.options" v-model="theme" />
        </section>
        <section class="setting-item">
          <span>{{ appearanceSetting.rounded.title }}</span>
          <app-switch v-model="rounded" />
        </section>
      </div>
    </section>
  </div>
</div>
</template>

<script>
// 组件
import Select from '@/components/input/Select'
import Radio from '@/components/input/Radio'
import Switch from '@/components/input/Switch'

// 数据
import { commonSetting, searchSetting, appearanceSetting } from '@/assets/js/data'
import { COMMONSETTING_LANGUAGE, SEARCHSETTING_DEFAULTENGINE, APPEARANCESETTING_THEME, APPEARANCESETTING_ROUNDED } from '@/store/mutationsTypes'

export default {
  name: 'setting',
  components: {
    AppSelect: Select,
    AppRadio: Radio,
    AppSwitch: Switch
  },
  data() {
    return {
      commonSetting, // 通用设置 数据
      searchSetting, // 搜索设置 数据
      appearanceSetting, // 外观设置 数据
    }
  },
  computed: {
    // 语言
    language: {
      get() {
        return this.$store.state.commonSetting.language
      },
      set(data) {
        this.$store.commit(COMMONSETTING_LANGUAGE, data)
      }
    },
    // 默认搜索引擎
    defaultEngine: {
      get() {
        return this.$store.state.searchSetting.defaultEngine
      },
      set(data) {
        this.$store.commit(SEARCHSETTING_DEFAULTENGINE, data)
      }
    },
    // 主题
    theme: {
      get() {
        return this.$store.state.appearanceSetting.theme
      },
      set(data) {
        this.$store.commit(APPEARANCESETTING_THEME, data)
      }
    },
    // 圆角效果
    rounded: {
      get() {
        return this.$store.state.appearanceSetting.rounded
      },
      set(data) {
        this.$store.commit(APPEARANCESETTING_ROUNDED, data)
      }
    },
  }
}
</script>

<style lang="stylus">
#setting
  .container
    width 700px
    margin 0 auto
    .setting-block-title
      margin 30px 0 15px
      color #3d3d3d
      font-weight 500
    .setting-block-content
      font-size 12px
      background #fff
      box-shadow 0 0 6px rgba(0, 0, 0, .1)
    .setting-item
      min-height 60px
      padding 0 30px
      border-bottom 1px solid #eee
      display flex
      align-items center
      justify-content space-between
</style>